<extend name="Common@common:layui" xmlns="http://www.w3.org/1999/html"/>
<block name="title">
    <title>自定义页管理</title>
</block>
<block name="style">
    <style>
        body {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        
        #container {
            position: absolute;
            height: 100%;
            width: 100%;
            background: #e8e8e8;
        }
        
        #left-side {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 330px;
            height: 100%;
            /* background: red; */
            background: #fff;
        }
        
        #content {
            margin: 0px 600px 0px 350px;
            height: 895px;
            background: #fff;
            overflow-y: auto;
        }

        #right-side {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 600px;
            height: 100%;
            background: green;
            overflow-y: auto;
        }

        .hhq-box {
            padding: 10px;
            border: 1px solid #ddd;
            background: #fff;
            border-radius: 3px;
        }

        .hhq-box-hd {
            line-height: 18px;
            height: 18px;
            padding: 0 10px;
            border-left: 3px solid #91d41c;
            margin-bottom: 10px;
            margin-top: 10px;
            display: inline-block;
        }

        .hhq-box-bd {
            border-top: 1px solid #ddd;
            border-bottom: 1px dashed #ddd;
            padding: 10px 0;
        }

        .zujian-item {
            width: 74px;
            float: left;
            padding: 3px 0;
            margin: 5px;
            border: 1px solid #dddddd;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
            /* -webkit-transition: All 0.3s ease-in-out;
            -moz-transition: All 0.3s ease-in-out;
            -o-transition: All 0.3s ease-in-out;
            transition: All 0.3s ease-in-out; */
            color: #424242;
        }
        
        .zujian-item:hover {
            background: #fff;
            border: 1px solid #00aeff;
            color: #00aeff;
            /* -webkit-transition: All 0.4s;
            -moz-transition: All 0.4s;
            -o-transition: All 0.4s;
            transition: All 0.4s; */
        }
        
        .zujian-item:active {
            background: #f8f8f8;
            border: 1px solid #62c5f3;
            color: #62c5f3;
        }
        
        .zujian-item p:first-child {
            padding: 10px 0;
        }
        @font-face {
            font-family: 'page-iconfont';
            src: url('/Public/iconfont/mypage/iconfont.eot');
            src: url('/Public/iconfont/mypage/iconfont.eot?#iefix') format('embedded-opentype'),
            url('/Public/iconfont/mypage/iconfont.woff2') format('woff2'),
            url('/Public/iconfont/mypage/iconfont.woff') format('woff'),
            url('/Public/iconfont/mypage/iconfont.ttf') format('truetype'),
            url('/Public/iconfont/mypage/iconfont.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family: "page-iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .module{
            display: inline-block;
            width: 99.5%;
            height:100px;
            border: 1px dashed #91d41c;
            position: relative;
        }
        .module:hover{
            background-color: #eee;
        }
        .module .layui-icon-close{
            position: absolute;
            top: 0px;
            right: 0px;
        }
        .module .layui-icon-edit{
            position: absolute;
            top: 0px;
            right: 30px;
        }
        .module .layui-icon-edit:hover{
           color: #1eff4a !important;
        }
        .module .layui-icon-close:hover{
            color: red !important;
        }
        .module .layui-icon-close:active,.module .layui-icon-edit:active{
            color: #1E9FFF !important;
        }
        .img-wrap {
            width: 207px;
            height: 207px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            border: 1px dashed #ccc;
            cursor: pointer;
        }

        .img-wrap img {
            width: 100%;
            height: 100%;
        }
        /*.module1:nth-of-type(1){*/
            /*background-color: #f00;*/
        /*}*/
        /*.module1:nth-of-type(2){*/
            /*background-color: #0f0;*/
        /*}*/
        /*.module1:nth-of-type(3){*/
            /*background-color: #00f;*/
        /*}*/
        /*.panel-module-mask {*/
            /*background: #76f299 !important;*/
        /*}*/
        /*.panel-module-handle {*/
            /*position: absolute;*/
            /*left: auto !important;*/
            /*right: 0;*/
            /*top: 0;*/
            /*z-index: 2;*/
        /*}*/
        /*.panel-module-mask {*/
            /*border: 2px dashed #1e9fff !important;*/
        /*}*/
    </style>
</block>

<block name="main">
    <div id="container">
        <form class="layui-form submitPageForm">
        <input name="id" type="hidden" value="{$_GET['id']}">
        <div id="left-side">
            <div class="hhq-box" style="margin:20px;">
                <div class="hhq-box-hd">组件库</div>
                <div class="hhq-box-bd">
                    <div class="layui-clear">
                        <div class="zujian-item" lay-active="carousel">
                            <p><i class="iconfont">&#xe63c;</i></p>
                            <p>图片轮播</p>
                        </div>
                        <div class="zujian-item" lay-active="imgGroup">
                            <p><i class="layui-icon layui-icon-picture-fine"></i></p>
                            <p>单图组</p>
                        </div>
                        <!--<div class="zujian-item" lay-active="imgs_group">-->
                            <!--<p><i class="iconfont">&#xe6b2;</i></p>-->
                            <!--<p>图片橱窗</p>-->
                        <!--</div>-->
                        <!--<div class="zujian-item" lay-active="nav">-->
                            <!--<p><i class="iconfont">&#xe602;</i></p>-->
                            <!--<p>导航组</p>-->
                        <!--</div>-->
                        <div class="zujian-item" lay-active="video">
                            <p><i class="layui-icon layui-icon-video"></i></p>
                            <p>视频组</p>
                        </div>
                        <div class="zujian-item" lay-active="article">
                            <p><i class="iconfont">&#xe600;</i></p>
                            <p>文章组</p>
                        </div>
                        <div class="zujian-item" lay-active="textEdit">
                            <p><i class="iconfont">&#xe608;</i></p>
                            <p>富文本</p>
                        </div>
                    </div>
                </div>
                <button class="layui-btn layui-btn-normal submitPage" type="button" style="margin-top: 10px;margin-left: 160px">保存页面</button>
            </div>
        </div>
        <div id="content">
            <foreach name="info" item="vo" key="k">
                <div class="module" id="module-{$k}" data-module="{$vo|getFirstElementKey}" data-timestamp="{$k}" >
                    <div class="hhq-box-hd">{$vo|getFirstElementKey|useToEditPageGetzujianName}</div>
                    <div class="layui-form-item" style="display: none">
                        <label class="layui-form-label">key</label>
                        <div class="layui-input-inline" style="width: 300px">
                            <input type="text" name="{$k}[{$vo|getFirstElementKey}][key]" value="{$vo|getChildenElementValue=###,key}" placeholder="" class="layui-input"  />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-inline" style="width: 300px">
                            <input type="text" name="{$k}[{$vo|getFirstElementKey}][desc]" value="{$vo|getChildenElementValue=###,desc}" placeholder="组件描述" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="display: none">
                        <label class="layui-form-label">数据</label>
                        <div class="layui-input-inline" style="width: 300px">
                            <textarea name="{$k}[{$vo|getFirstElementKey}][data]" readonly="readonly" placeholder="" class="layui-textarea sideData" />{$vo|getChildenElementValue=###,data}</textarea>
                        </div>
                    </div>
                    <i class="layui-icon layui-icon-close" onclick="delZujian(this);" style="font-size: 30px; color: #1E9FFF;"></i>
                    <i class="layui-icon layui-icon-edit " onclick="editZujian(this);"  style="font-size: 30px; color: #1E9FFF;"></i>
                </div>
            </foreach>
        </div>
        </form>
        <script id="moduleTpl" type="text/html">
            <div class="module" id="module-{{d.timestamp}}" data-module="{{d.zujianObj}}" data-timestamp="{{d.timestamp}}" >
                <div class="hhq-box-hd">{{ d.zujianName}}</div>
                <div class="layui-form-item" style="display: none">
                    <label class="layui-form-label">key</label>
                    <div class="layui-input-inline" style="width: 300px">
                        <input type="text" name="{{ d.timestamp}}[{{ d.zujianObj}}][key]" value="" placeholder="" class="layui-input"  />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-inline" style="width: 300px">
                        <input type="text" name="{{ d.timestamp}}[{{ d.zujianObj}}][desc]" value="" placeholder="组件描述" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item" style="display: none">
                    <label class="layui-form-label">数据</label>
                    <div class="layui-input-inline" style="width: 300px">
                        <textarea name="{{ d.timestamp}}[{{ d.zujianObj}}][data]" readonly="readonly" placeholder="" class="layui-textarea sideData" /></textarea>
                    </div>
                </div>
                <i class="layui-icon layui-icon-close" onclick="delZujian(this);" style="font-size: 30px; color: #1E9FFF;"></i>
                <i class="layui-icon layui-icon-edit " onclick="editZujian(this);"  style="font-size: 30px; color: #1E9FFF;"></i>
            </div>
        </script>
        <div id="right-side">

        </div>
        <include file="Page:Include/carousel" />
        <include file="Page:Include/img_group" />
        <include file="Page:Include/imgs_group" />
        <include file="Page:Include/text_edit" />
        <include file="Page:Include/nav" />
        <include file="Page:Include/video" />
        <include file="Page:Include/article" />
    </div>
    <!--作用初始化-->
    <textarea id="myEditor" style="display: none"></textarea>
</block>


<block name="script">
    <script src="/Public/jquery.min.js"></script>
    <script src="/Public/static/js/jquery-ui.min.js"></script>
    <script src="/Public/ueditor1.4.3/ueditor.config.js "></script>
    <script src="/Public/ueditor1.4.3/ueditor.all.js "></script>
    <script src="/Public/ueditor1.4.3/lang/zh-cn/zh-cn.js?v=1.1.1 "></script>
    <script src="/Public/ueditor1.4.3/ueditor.redirect.js "></script>
    <script>
        layui.use(['util','carousel','laytpl','upload','form','miniweb'], function(){
            var $ = layui.$,
                util = layui.util,
                laytpl = layui.laytpl,
                upload = layui.upload,
                form = layui.form,
                carousel = layui.carousel;

            $('.submitPage').click(function(){
                var ii = layer.msg('Loading...', { icon: 16, time: 10000 });
                $.ajax({
                    url: '/admin/page/editpage_post',
                    data: $('.submitPageForm').serialize(),
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        layer.close(ii);
                        if (data.status == 1) {
                            layer.msg(data.info, { icon: 1, time: 1000 }, function(){
                                parent.layer.closeAll();
                            });
                        } else {
                            layer.msg(data.info, { icon: 2, time: 1000 });
                        }
                    }
                });
            });
            util.event('lay-active', {
                carousel: function(){
                    sideShow('carouselTpl','图片轮播');
                }
                ,imgGroup: function(){
                    sideShow('imgGroupTpl','单图组');
                }
                ,imgs_group: function(){
                    sideShow('imgsGroupTpl','图片橱窗');
                }
                ,nav: function(){
                    sideShow('navTpl','导航组');
                }
                ,video: function(){
                    sideShow('videoTpl','视频组');
                }
                ,article: function(){
                    sideShow('articleTpl','文章组');
                }
                ,textEdit: function(){
                    sideShow('textEditTpl','富文本');
                }
            });
            function sideShow(zujianObj,zujianName) {
                var timestamp = new Date().valueOf();
                var data = { //数据
                    "timestamp": timestamp,
                    "zujianName":zujianName,
                    'zujianObj':zujianObj
                };
                console.log(data);
                $('#right-side').empty();
                //渲染组件描述
                laytpl($('#moduleTpl').html()).render(data, function(html) {
                    $('#content').append(html);
                    $('.module').each(function () {
                        $(this).css('border-color','#91d41c');
                        $(this).css('background-color','#ffffff');
                    });
                    $('#content').children('.module:last-child').css('border-color','red');
                    $('#content').children('.module:last-child').css('background-color','#fff5d4');
                    //渲染组件
                    if(zujianObj == 'carouselTpl'){
                        laytpl($('#'+zujianObj).html()).render({'interval':'','autoplay':''}, function(html) {
                            $('#right-side').append(html);
                            laytpl($('#carouselImgTpl').html()).render({'url':'','title':'','content':'','link':''}, function(html) {
                                $('#carouselImgView').append(html);

                            });
                        });
                        linstenRenderCarouselUpload();
                        listenAddCarouselImg();
                        listenSaveCourselSet(zujianObj,timestamp);
                    }
                    if(zujianObj == 'imgGroupTpl'){
                        laytpl($('#'+zujianObj).html()).render({}, function(html) {
                            $('#right-side').append(html);
                            for(var i =0;i<2;i++){
                                laytpl($('#imgGroupImgTpl').html()).render({'url':'','title':'','content':'','link':''}, function(html) {
                                    $('#imgGroupImgView').append(html);

                                });
                            }
                        });
                        linstenRenderImgGroupUpload();
                        listenAddImgGroupImg();
                        listenSaveImgGroupSet(zujianObj,timestamp);
                    }
                    if(zujianObj == 'videoTpl'){
                        laytpl($('#'+zujianObj).html()).render({'id':'','url':'','fengmian':'','link':'','autoplay':''}, function(html) {
                            $('#right-side').append(html);
                            linstenRenderVideoUpload();
                        });
                        listenSaveVideoSet(zujianObj,timestamp);
                    }
                    if(zujianObj == 'textEditTpl'){
                        laytpl($('#'+zujianObj).html()).render({'title':'','content':'','link':''}, function(html) {
                            $('#right-side').append(html);

                            UE.getEditor('myEditor').destroy();
                            instanceEdit();
                            listenSavetextEditSet(zujianObj,timestamp)
                        });
                    }
                    if(zujianObj == 'articleTpl'){
                        // http://www.ajplaychina.com/admin/cat/getdata_cat_tree/group_id/1
                        $.post("/admin/cat/getdata_cat_tree/group_id/1", {

                        }, function(ret) {
                            if(ret.status){
                                laytpl($('#'+zujianObj).html()).render(ret, function(html) {
                                    $('#right-side').append(html);
                                    form.render();
                                    listenAddArticleImg();
                                    listenSaveArticleSet(zujianObj,timestamp);
                                });
                            }
                        });

                    }
                });
            }
            //轮播图监听
            function listenAddCarouselImg(){
                //监听添加轮播图配置
                $('#addCarouselImg').click(function() {
                    //渲染添加轮播图配置
                    laytpl($('#carouselImgTpl').html()).render({'url':'','title':'','content':'','link':''}, function(html) {
                        $('#carouselImgView').append(html);
                        $( function() {
                            $( "#carouselImgView" ).sortable();
                            $( "#carouselImgView" ).disableSelection();
                        } );
                    });
                    linstenRenderCarouselUpload();
                });
            }
            function listenSaveCourselSet(zujianObj,timestamp){
                var carouselData = {};
                $(".carouselSubmit").click(function(){
                    carouselData['interval'] = $('#carouselImgViewModuleParent').find("input[name='interval']").val();
                    carouselData['autoplay'] = $('#carouselImgViewModuleParent').find("input[name='autoplay']").val();
                    var imgList = [];
                    $('.carouselImgViewModule').each(function () {
                        var imgData = {};
                        imgData['url'] = $(this).find("input[name='url']").val();
                        imgData['link'] = $(this).find("input[name='link']").val();
                        imgData['title'] = $(this).find("input[name='title']").val();
                        imgData['content'] = $(this).find("textarea[name='content']").val();
                        imgList.push(imgData);
                    });
                    carouselData['imgList'] = imgList;
                    console.log(carouselData);
                    $('#module-'+timestamp).find("textarea").val(JSON.stringify(carouselData));
                    // $('#module-'+timestamp).find("input[name='"+timestamp+"["+zujianObj+"][data]']").val(JSON.stringify(carouselData));
                    layer.msg('已保存草稿,保存页面生效',{time: 1000});
                });
            }

            //单图组监听
            function listenAddImgGroupImg(){
                $('#addImgGroupImg').click(function() {
                    laytpl($('#imgGroupImgTpl').html()).render({'url':'','title':'','content':'','link':''}, function(html) {
                        $('#imgGroupImgView').append(html);
                        $( function() {
                            $( "#imgGroupImgView" ).sortable();
                            $( "#imgGroupImgView" ).disableSelection();
                        } );
                    });
                    //渲染上传组件
                    linstenRenderImgGroupUpload();
                });
            }
            function listenSaveImgGroupSet(zujianObj,timestamp){
                var imgGroupData = {};
                $(".imgGroupSubmit").click(function(){
                    var imgList = [];
                    $('.imgGroupImgViewModule').each(function () {
                        var imgData = {};
                        imgData['url'] = $(this).find("input[name='url']").val();
                        imgData['link'] = $(this).find("input[name='link']").val();
                        imgData['title'] = $(this).find("input[name='title']").val();
                        imgData['content'] = $(this).find("textarea[name='content']").val();
                        imgList.push(imgData);
                    });
                    imgGroupData['imgList'] = imgList;
                    console.log(imgGroupData);
                    $('#module-'+timestamp).find("textarea").val(JSON.stringify(imgGroupData));
                    // $('#module-'+timestamp).find("input[name='"+timestamp+"["+zujianObj+"][data]']").val(JSON.stringify(imgGroupData));
                    layer.msg('已保存草稿,保存页面生效',{time: 1000});
                });
            }

            //视频组监听
            function listenSaveVideoSet(zujianObj,timestamp){
                var videoData = {};
                $(".videoSubmit").click(function(){
                    videoData['id'] = $('#videoImgViewModuleParent').find("input[name='id']").val();
                    videoData['url'] = $('#videoImgViewModuleParent').find("input[name='url']").val();
                    videoData['fengmian'] = $('#videoImgViewModuleParent').find("input[name='fengmian']").val();
                    videoData['link'] = $('#videoImgViewModuleParent').find("input[name='link']").val();
                    videoData['autoplay'] = $('#videoImgViewModuleParent').find("input[name='autoplay']").val();
                    console.log(videoData);
                    $('#module-'+timestamp).find("textarea").val(JSON.stringify(videoData));
                    // $('#module-'+timestamp).find("input[name='"+timestamp+"["+zujianObj+"][data]']").val(JSON.stringify(videoData));
                    layer.msg('已保存草稿,保存页面生效',{time: 1000});
                });
            }

            //富文本监听
            function listenSavetextEditSet(zujianObj,timestamp){
                var textEditData = {};
                $(".textEditSubmit").click(function(){
                    console.log(6666)
                    textEditData['title'] = $('#textEditImgViewModuleParent').find("input[name='title']").val();
                    textEditData['content'] = edit.getContent();
                    textEditData['link'] = $('#textEditImgViewModuleParent').find("input[name='link']").val();
                    console.log(textEditData);
                    $('#module-'+timestamp).find("textarea").val(JSON.stringify(textEditData));
                    // $('#module-'+timestamp).find("input[name='"+timestamp+"["+zujianObj+"][data]']").val(JSON.stringify(textEditData));
                    layer.msg('已保存草稿,保存页面生效',{time: 1000});
                });
            }

            //文章组监听
            function listenAddArticleImg(){
                $('#addArticleImg').click(function() {
                    var catsId = $(this).parent().find('select').val();
                    console.log(catsId);
                    open_iframe_dialog('/admin/page/article_select?catsId='+catsId+'','选择文章',['90%','90%'],0);
                });
            }
            function listenSaveArticleSet(zujianObj,timestamp){
                var articleData = {};
                $(".articleSubmit").click(function(){
                    var articleList = [];
                    $('.articleImgViewModule').each(function () {
                        var articleDataSingle = {};
                        articleDataSingle['id'] = $(this).find("input[name='id']").val();
                        articleDataSingle['title'] = $(this).find("input[name='title']").val();
                        articleDataSingle['author'] = $(this).find("input[name='author']").val();
                        articleDataSingle['content'] = $(this).find("textarea[name='content']").val();
                        articleDataSingle['create_time'] = $(this).find("input[name='create_time']").val();
                        articleDataSingle['link'] = $(this).find("input[name='link']").val();
                        articleList.push(articleDataSingle);
                    });
                    articleData['articleList'] = articleList;

                    console.log(articleData);
                    $('#module-'+timestamp).find("textarea").val(JSON.stringify(articleData));
                    // $('#module-'+timestamp).find("input[name='"+timestamp+"["+zujianObj+"][data]']").val(JSON.stringify(articleData));
                    layer.msg('已保存草稿,保存页面生效',{time: 1000});
                });
            }

            editZujian = function (obj) {
                // console.log(JSON.parse($(obj).parent().find('.sideData').val()));
                $('.module').each(function () {
                        $(this).css('border-color','#91d41c');
                        $(this).css('background-color','#ffffff');
                });
                $(obj).parent().css('border-color','red');
                $(obj).parent().css('background-color','#fff5d4');
                var zujianObj = $(obj).parent().data('module');
                var timestamp = $(obj).parent().data('timestamp');
                if(zujianObj == 'carouselTpl'){
                    var zujianData = {'interval':'','autoplay':'','imgList':[{'url':'','title':'','content':'','link':''}]}
                    if($(obj).parent().find('.sideData').val() != ''){
                        zujianData = JSON.parse($(obj).parent().find('.sideData').val());
                    }
                    console.log(typeof(zujianData) );
                    $('#right-side').empty();
                    laytpl($('#'+zujianObj).html()).render(zujianData, function(html) {
                        $('#right-side').append(html);
                        for(var i=0;i<zujianData.imgList.length;i++){
                            laytpl($('#carouselImgTpl').html()).render(zujianData.imgList[i], function(html) {
                                $('#carouselImgView').append(html);

                                $( function() {
                                    $( "#carouselImgView" ).sortable();
                                    $( "#carouselImgView" ).disableSelection();
                                } );
                            });
                        }
                        linstenRenderCarouselUpload();
                        listenAddCarouselImg();
                        listenSaveCourselSet(zujianObj,timestamp);
                    });
                }
                if(zujianObj == 'imgGroupTpl'){
                    var zujianData = {'imgList':[{'url':'','title':'','content':'','link':''},{'url':'','title':'','content':'','link':''}]}
                    if($(obj).parent().find('.sideData').val() != ''){
                        zujianData = JSON.parse($(obj).parent().find('.sideData').val());
                    }
                    console.log(typeof(zujianData) );
                    $('#right-side').empty();
                    laytpl($('#'+zujianObj).html()).render(zujianData, function(html) {
                        $('#right-side').append(html);
                        for(var i=0;i<zujianData.imgList.length;i++){
                            laytpl($('#imgGroupImgTpl').html()).render(zujianData.imgList[i], function(html) {
                                $('#imgGroupImgView').append(html);

                                $( function() {
                                    $( "#imgGroupImgView" ).sortable();
                                    $( "#imgGroupImgView" ).disableSelection();
                                } );
                            });
                        }
                        linstenRenderImgGroupUpload();
                        listenAddImgGroupImg();
                        listenSaveImgGroupSet(zujianObj,timestamp);
                    });
                }
                if(zujianObj == 'videoTpl'){
                    var zujianData = {'id':'','url':'','fengmian':'','link':'','autoplay':''};
                    if($(obj).parent().find('.sideData').val() != ''){
                        zujianData = JSON.parse($(obj).parent().find('.sideData').val());
                    }
                    console.log(typeof(zujianData) );
                    $('#right-side').empty();
                    laytpl($('#'+zujianObj).html()).render(zujianData, function(html) {
                        $('#right-side').append(html);

                    });
                    linstenRenderVideoUpload();
                    listenSaveVideoSet(zujianObj,timestamp);
                }
                if(zujianObj == 'textEditTpl'){
                    var zujianData = {'title':'','content':'','link':''};
                    if($(obj).parent().find('.sideData').val() != ''){
                        zujianData = JSON.parse($(obj).parent().find('.sideData').val());
                    }
                    console.log(typeof(zujianData) );
                    $('#right-side').empty();
                    laytpl($('#'+zujianObj).html()).render(zujianData, function(html) {
                        $('#right-side').append(html);
                        UE.getEditor('myEditor').destroy();
                        instanceEdit();
                        listenSavetextEditSet(zujianObj,timestamp)
                    });
                }
                if(zujianObj == 'articleTpl'){
                    var zujianData = {"articleList":[]};
                    if($(obj).parent().find('.sideData').val() != ''){
                        zujianData = JSON.parse($(obj).parent().find('.sideData').val());
                    }
                    console.log(typeof(zujianData) );
                    console.log(zujianData);
                    $('#right-side').empty();
                    $.post("/admin/cat/getdata_cat_tree/group_id/1", {

                    }, function(ret) {
                        if(ret.status){
                            zujianData['data'] = ret.data;
                            laytpl($('#'+zujianObj).html()).render(zujianData, function(html) {
                                $('#right-side').append(html);
                                form.render();
                                if(zujianData.articleList != 0){
                                    for(var i=0;i<zujianData.articleList.length;i++){
                                        laytpl($('#articleImgTpl').html()).render(zujianData.articleList[i], function(html) {
                                            $('#articleImgView').append(html);
                                        });
                                    }
                                }
                                $( function() {
                                    $( "#articleImgView" ).sortable();
                                    $( "#articleImgView" ).disableSelection();
                                } );
                                listenAddArticleImg();
                                listenSaveArticleSet(zujianObj,timestamp);
                            });
                        }
                    });
                }
            };

        });
        delZujian = function (obj) {
            var asker = layer.confirm('确定删除吗？', function() {
                $(obj).parent().remove();
                layer.close(asker);
            });
        };
        //删除轮播图配置
        delCarouselImg = function (obj) {
            var asker = layer.confirm('确定删除吗？', function() {
                $(obj).parent().remove();
                layer.close(asker);
            });
        };
        delImgGroupImg = function (obj) {
            var asker = layer.confirm('确定删除吗？', function() {
                $(obj).parent().remove();
                layer.close(asker);
            });
        };
        delThisImg = function (obj) {
            var asker = layer.confirm('确定删除吗？', function() {
                $(obj).parent().find('.thisImg').empty();
                $(obj).parent().parent().find("input[name='url']").val(null);
                layer.close(asker);
            });
        };
        delThisVideo = function (obj) {
            var asker = layer.confirm('确定删除吗？', function() {
                $(obj).parent().find('.thisImg').empty();
                $(obj).parent().parent().find("input[name='url']").val(null);
                $(obj).parent().parent().find("input[name='fengmian']").val(null);
                layer.close(asker);
            });
        };
        delArticleImg = function (obj) {
            var asker = layer.confirm('确定删除吗？', function() {
                $(obj).parent().remove();
                layer.close(asker);
            });
        };
        //文章回调
        function callback_select(callbackArticleData) {
            close_iframe_dialog();
            console.log(callbackArticleData);
            callbackArticleData['link'] = '';
            layui.laytpl($('#articleImgTpl').html()).render(callbackArticleData, function(html) {
                $('#articleImgView').append(html);
                $( function() {
                    $( "#articleImgView" ).sortable();
                    $( "#articleImgView" ).disableSelection();
                } );
            });
        }
        function callback_video(ret) {
            layui.use(['jquery', 'laytpl'], function() {
                var $ = layui.jquery,
                    laytpl = layui.laytpl;
                close_iframe_dialog();
                console.log(ret);
                $('.uploadVideoImg').parent().find('.thisImg').html('<img src="'+ ret.url +'?vframe/jpg/offset/5">');
                $('.uploadVideoImg').parent().parent().find("input[name='url']").val(ret.url);
                $('.uploadVideoImg').parent().parent().find("input[name='fengmian']").val(ret.url+'?vframe/jpg/offset/5');
                $('.uploadVideoImg').parent().parent().find("input[name='url']").attr('value',ret.url);
                $('.uploadVideoImg').parent().parent().find("input[name='fengmian']").attr('value',ret.url+'?vframe/jpg/offset/5');
            });
        }
        //监听轮播图上传
        function linstenRenderCarouselUpload() {
            console.log(6666)
            //渲染上传组件
            $('.uploadCarouselImg').each(function () {
                var $this = $(this);
                //监听图片上传
                var upimgLoading;
                var uploadInst = layui.upload.render({
                    elem: $this,
                    url: '/content/image/qiniu_upload?type=image',
                    before: function() {
                        upimgLoading = layer.msg('图片上传中...', {
                            icon: 16,
                            time: 10000
                        });
                        // object.preview(function(index, file, result){
                        //     $this.parent().find('.thisImg').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                        // });
                    },
                    done: function(ret) {
                        if (ret.status) {
                            $this.parent().find('.thisImg').html('<img src="'+ ret.data.url +'">');
                            $this.parent().parent().find("input[name='url']").val(ret.data.url);
                            layer.close(upimgLoading);
                        } else {
                            layer.alert(ret.info);
                        }
                    }
                });
                $this.parent().parent().find("input[name='url']").change(function () {
                    $this.parent().find('.thisImg').html('<img src="'+ $this.parent().parent().find("input[name='url']").val() +'">');
                });
            })
        };
        //监听单图组上传
        function linstenRenderImgGroupUpload() {
            $('.uploadImgGroupImg').each(function () {
                var $this = $(this);
                //监听图片上传
                var upimgLoading;
                var uploadInst = layui.upload.render({
                    elem: $this,
                    url: '/content/image/qiniu_upload?type=image',
                    before: function() {
                        upimgLoading = layer.msg('图片上传中...', {
                            icon: 16,
                            time: 10000
                        });
                        // object.preview(function(index, file, result){
                        //     $this.parent().find('.thisImg').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                        // });
                    },
                    done: function(ret) {
                        if (ret.status) {
                            $this.parent().find('.thisImg').html('<img src="'+ ret.data.url +'">');
                            $this.parent().parent().find("input[name='url']").val(ret.data.url);
                            layer.close(upimgLoading);
                        } else {
                            layer.alert(ret.info);
                        }
                    }
                });
                $this.parent().parent().find("input[name='url']").change(function () {
                    $this.parent().find('.thisImg').html('<img src="'+ $this.parent().parent().find("input[name='url']").val() +'">');
                });
            })
        };
        //监听视频上传
        function linstenRenderVideoUpload() {
            $('.uploadVideoImg').each(function () {
                var $this = $(this);
                //监听图片上传
                // var upimgLoading;
                // var uploadInst = layui.upload.render({
                //     elem: $this,
                //     url: '/content/image/qiniu_upload?type=media',
                //     accept: 'video',
                //     before: function() {
                //         upimgLoading = layer.msg('视频上传中...', {
                //             icon: 16,
                //             time: 15000
                //         });
                //     },
                //     done: function(ret) {
                //         if (ret.status) {
                //             $this.parent().find('.thisImg').html('<img src="'+ ret.data.url +'?vframe/jpg/offset/5">');
                //             $this.parent().parent().find("input[name='url']").val(ret.data.url);
                //             $this.parent().parent().find("input[name='fengmian']").val(ret.data.url+'?vframe/jpg/offset/5');
                //             layer.close(upimgLoading);
                //         } else {
                //             layer.alert(ret.info);
                //         }
                //     }
                // });
                $this.parent().parent().find("input[name='url']").change(function () {
                    $this.parent().find('.thisImg').html('<img src="'+ $this.parent().parent().find("input[name='url']").val() +'?vframe/jpg/offset/5">');
                    $this.parent().parent().find("input[name='fengmian']").val($this.parent().parent().find("input[name='url']").val()+'?vframe/jpg/offset/5');
                });
                $this.parent().parent().find("input[name='fengmian']").change(function () {
                    $this.parent().find('.thisImg').html('<img src="'+ $this.parent().parent().find("input[name='fengmian']").val() +'">');
                });
            })
        };
        var edit;
        // //实例化编辑器
        instanceEdit();
        function instanceEdit() {
            edit = UE.getEditor('myEditor', {
                toolbars: [[
                    'fullscreen', 'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'removeformat', 'forecolor', '|', 'cleardoc', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'indent','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                    'link', 'simpleupload', 'insertimage', 'insertvideo','horizontal', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols'

                ]],
                catchRemoteImageEnable:false,
            });
            // ue.ready(function(){
            //     $('.edui-editor-bottomContainer').addClass('dis');
            //     ue.addListener("contentChange",function(){
            //         $('#ueditor_0').contents().find('.video-div').each(function(){
            //             if($(this).find('video').length == 0){
            //                 $(this).css('height','400px').css('line-height','400px').css('background-color','#ccc').css('text-align','center');
            //             }
            //         });
            //     });
            // });
        }
        $( function() {
            $( "#content" ).sortable();
            $( "#content" ).disableSelection();
        } );
    </script>
</block>